<!-- 价格趋势-->
<!-- 曲线图-->
<template>
  <div id="planePriceTrend">
    <div id="planePriceTrendInfo">
      <h2 style="font-family: '仓耳渔阳体 W04', serif">价格趋势</h2>
      <el-col class="priceTrendInput" :span="5">
        <el-autocomplete
            v-model="planePriceLeaveCity"
            :fetch-suggestions="querySearch"
            placeholder="城市名"
            @select="handleSelect"
        />
      </el-col>
      <el-button
          class="animate__animated animate__fadeIn"
          id="planeSwitchButton"
          circle
          :icon="Switch"
      >
      </el-button>
      <el-col class="priceTrendInput" :span="5">
        <el-autocomplete
            v-model="planePriceArriveCity"
            :fetch-suggestions="querySearch"
            placeholder="城市名"
            @select="handleSelect"
        />
      </el-col>
      <el-button id="planeSearchPriceTrend">查看趋势</el-button>
    </div>
    <el-card>
      <div id="tu" class="charts"></div>
    </el-card>

  </div>

</template>

<script>
import {Switch} from "@element-plus/icons-vue";
import {onMounted} from "vue";
import * as echarts from "echarts";

export default {
  name: "PriceTrend",
  data() {
    return {
      Switch,
      planePriceInfo: [],
      planePriceLeaveCity: '上海',
      planePriceArriveCity: '北京',
    }
  },
  methods: {
    querySearch(queryString, cb) {
      let planeInfo = this.planePriceInfo;
      let results = queryString ? planeInfo.filter(this.createFilter(queryString)) : planeInfo;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {"value": "北京"},
        {"value": "上海"},
        {"value": "广州"},
        {"value": "深圳"},
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  mounted() {
    this.planePriceInfo = this.loadAll()

  },
  setup() {

    onMounted(() => {
      const myChart = echarts.init(document.getElementById('tu'))
      // 指定图表的配置项和数据
      let option = {
        lineStyle: {color: ' #529b2e'},
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'cross'}
        },
        legend: {
          data: ['销量']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            data: ['12-4', '12-7', '12-10', '12-13', '12-16', '12-19', '12-22', '12-25', '12-28', '12-30'],
            boundaryGap: false,
          },
        ],
        yAxis: {},
        series: [
          {
            name: '价格',
            type: 'line',
            data: [329, 220, 179, 195, 128, 195, 200, 298, 300, 380]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    })
    return {}
  }
}
</script>

<style scoped>
#planePriceTrend {
  margin-left: 150px;
  width: 1250px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

h2 {
  margin-top: 10px;
  float: left;
}

#planePriceTrendInfo {
  text-align: left;
  width: 1250px;
  height: 60px;
  margin-bottom: 20px;
}

.priceTrendInput {
  margin-top: 10px;
  margin-left: 20px;
  float: left;
  width: 150px;
}

#planeSwitchButton {
  float: left;
  margin-top: 10px;
  font-size: 20px;
  color: #67C23A;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

#planeSearchPriceTrend {
  margin-top: 10px;
  margin-left: 20px;
  width: 100px;
  height: 30px;
  background: #67C23A;
  color: #FFFFFF;
}

.charts {
  width: 100%;
  height: 340px;
}
</style>